<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <!-- own style-->
    <link rel="stylesheet" href="../css/index/index.css">

    <!--owl library-->
    <link rel="stylesheet" href="../css/carousel/owl.carousel.css">
    <!-- Default Theme -->

    <link rel="stylesheet" href="../css/carousel/owl.theme.css">
    <!--  jQuery 1.7+  -->
    <script src="../js/jquery/jquery-1.9.1.min.js"></script>
    <script src="../js/carousel/owl.carousel.js"></script>
    <!--plugment library-->
    <script src="../js/arc_menu/zepto.min.js" type="text/javascript"></script>
    <script src="../js/arc_menu/plugmenu.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../css/arc_menu/plugmenu.css">
    <script type="text/javascript" src="../js/template/handlebars-v1.3.0.js"></script>

    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no, email=no">
    <title>主页</title>
    <!--
    这个是模板方法对应的模板
    -->
    <script id="item-template" type="text/x-handlebars-template">
        {{#each indexs}}
        <a class="link" href="{{link}}">
            <div class="swiper_item">
                <div class="swiper_item_name">{{name}}</div>
                <div class="swiper_item_line"></div>
                <div class="icon icon_style_10"></div>
                <div>
                    <div class="largeicon_text">当季热门，一览无遗</div>
                    <div class="largeicon_date"></div>
                </div>
            </div>
        </a>
        {{/each}}
    </script>

    <script>
        $(document).ready(function () {
            /**
             * 需要在服务器或者webstrom打开页面
             * 同样适用json,为了更好的模拟网络访问的效果
             * 我将需要传递的json数据放置到了文件夹下面
             * 10.13.22.6:travel/getIndex?category=id
             * travel/index.php/Order/index.html?id=6
             */
            $.getJSON("../json/index.json",function(data,status,xhr){
                var strJson = JSON.stringify(data);
                var dataObj = eval("("+ strJson + ")");
                var myTemplate = Handlebars.compile($("#item-template").html());
                $("#swip_bottom").append(myTemplate(data));

                var owl = $("#swip_bottom");
                owl.owlCarousel({
                    items: 10, //10 items above 1000px browser width
                    itemsDesktop: [1000, 8], //5 items between 1000px and 901px
                    itemsDesktopSmall: [900, 4], // betweem 900px and 601px
                    itemsTablet: [600, 4], //3 items between 600 and 0
                    itemsMobile: false, // itemsMobile disabled - inherit from itemsTablet option
                    mouseDraggable:false
                });
            });
        });
    </script>
</head>

<body>
<!--顶部-->
<div class="share">搜索 智慧旅游 添加关注</div>
<!--顶部弧形菜单-->
<div class="plug-div">
    <div class="plug-phone">
        <div class="plug-menu themeStyle">
            <span class="close"></span>
        </div>
        <div class="themeStyle plug-btn plug-btn1 close">
            <a href="#">
                <span style="background-image: url(../img/index/plugmenu1.png);"></span>
            </a>
        </div>
        <div class="themeStyle plug-btn plug-btn2 close">
            <a href="login.html">
                <span style="background-image: url(../img/index/plugmenu2.png);"></span>
            </a>
        </div>
        <div class="themeStyle plug-btn plug-btn3 close">
            <a href="#">
                <span style="background-image: url(../img/index/plugmenu4.png);"></span>
            </a>
        </div>
        <div class="themeStyle plug-btn plug-btn4 close">
            <a href="books_list.html">
                <span style="background-image: url(../img/index/plugmenu10.png);"></span>
            </a>
        </div>
    </div>
</div>
<!--底部-->
<div id="swip_bottom" class="owl-carousel owl-theme">
</div>
</body>
</html>